<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_M4_01;
    void main(){
        gl_Position = a_Position * u_M4_01;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
      gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';

    //顶点在裁剪空间的位置 = 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点的初始点位

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    let arr = [
        0, 0.3, -0.2,
        -0.3, -0.3, -0.2,
        0.3, -0.3, -0.2
    ];
    //正交投影矩阵
    let m4 = new Matrix4();
    //定义相机世界高度的一半
    const halfH = 1;
    //计算画布的宽高比
    const ratio = canvas.width / canvas.height;
    //计算相机世界宽度的一半
    const halfW = halfH * ratio;
    //定义相机世界的六个边界
    const [left, right, top, bottom, near, far] = [
        -halfW, halfW,
        halfH, -halfH,
        -10, -0
    ];

    m4.makeOrthographic(left, right, top, bottom, near, far);

    let poly = new Poly({
        gl: gl,
        arr: arr,
        list: [
            { name: 'a_Position', size: 3, beginIndex: 0 }
        ],
        uniforms: {
            'u_Color': {
                type: 'uniform4fv',
                value: [1, 1, 0, 1]
            },
            'u_M4_01': {
                type: 'uniformMatrix4fv',
                value: m4.elements
            }
        }
    });

    poly.draw(["TRIANGLES", "POINTS"]);

</script>

</html>